<template>
	<view class="pageBox">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<image class="back" src="http://www.bobei.shop/static/back.png" @click="goBack"></image>
			<!-- <view class="title">
				邀请好友
			</view> -->
		</view>
		<view class="page" :style="{paddingTop: statusBarHeight + 44 + 'px'}">
			<view class="inviteBox flex-between">
				<view class="invite">
					<swiper class="noticeSwiper" :vertical='true' circular :indicator-dots="false" :autoplay="true"
						:interval="3000" :duration="500">
						<swiper-item v-for="item in recommendList" :key="item.id">
							<view class="noticeSwiperItem" v-if="item.recommendUser && item.user">
								{{ item.recommendUser.nickname }}邀请了{{ item.user.nickname }}
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="rule flex-center" @click="invite_rule">
					活动规则
				</view>
			</view>

			<image class="shareTitle" src="http://www.bobei.shop/static/third/shareTitle.png"></image>

			<view class="mainBox">
				<image class="shareMain" src="http://www.bobei.shop/static/third/shareMain.png"></image>
				<view class="main flex-row">
					<view class="tips">
						每邀请一位新用户可获得相应易付豆奖励
					</view>
					<view class="num flex-center">
						<view class="numText">
							{{ yaoAward }}
						</view>
						<image class="bean2" src="http://www.bobei.shop/static/third/bean2.png"></image>
					</view>

					<view class="tips2">
						邀请越多好友 赚取更多奖励
					</view>

					<button class="inviteBtn" @click="onInviteBtn">立即邀请好友</button>

					<view class="qrcodeBox flex-center">
						<qr-code ref="qrcode" :val="val" :size="size" :loadMake="true" :usingComponents="true"
							:showLoading="false" loadingText="二维码生成中..." @result="qrR" v-if="val"></qr-code>
					</view>

					<view class="inviteCode flex-center">
						<view class="inviteCodeL">
							邀请码：
						</view>
						<view class="inviteCodeR">
							{{ info.inviteCode }}
						</view>
					</view>


				</view>
			</view>
			<view class="record">
				<view class="recordTitle flex-center">
					邀请记录
				</view>

				<view class="recordList">
					<view class="recordListItem flex-between" v-for="(item,index) in recommendAwardList" :key="item.id">
						<view class="recordListItemL flex-row">
							<view class="recordListItemLIndex">
								<image class="indexIcon" src="http://www.bobei.shop/static/third/first.png"
									v-if="index == 0"></image>
								<image class="indexIcon" src="http://www.bobei.shop/static/third/second.png"
									v-if="index == 1"></image>
								<image class="indexIcon" src="http://www.bobei.shop/static/third/third.png"
									v-if="index == 2"></image>
								<view :class="[index < 3 ? 'indexText indexTextWhite' : 'indexText indexTextBlack']">
									{{ index + 1 }}
								</view>
							</view>
							<view class="info" v-if="item.user">
								<view class="mobile">
									{{ item.user.nickname }}
								</view>
								<view class="date">
									{{ item.createdAt }}
								</view>
							</view>
						</view>
						<view class="recordListItemR">
							已赚{{ item.recommendAward }}易付豆
						</view>
					</view>
				</view>

			</view>

			<view class="to-the-end flex-center">
				<view class="to-the-end-line">

				</view>
				<view class="to-the-end-text">
					到底了
				</view>
				<view class="to-the-end-line">

				</view>
			</view>
		</view>

		<my-popup-tips :showTips="showTips" :mask="true" type="bottom" @tipsOpen="tipsOpen" @tipsClose="tipsClose">
			<view class="tipsBox">
				<view class="tipsTitle flex-center">
					分享
				</view>
				<view class="shareBox flex-between">
					<view class="shareItem flex-row" v-for="(item, index) in shareList" :key="index"
						@click="onShareItem(item)">
						<image class="wechatIcon" :src="item.wechatIcon"></image>
						<view class="wechatText">
							{{ item.wechatText }}
						</view>
					</view>
				</view>
			</view>
		</my-popup-tips>
	</view>
</template>

<script>
	import qrcode from "../components/tki-qrcode/tki-qrcode.vue";
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	export default {
		components: {
			"qr-code": qrcode, // https://ext.dcloud.net.cn/plugin?id=39
			"my-popup-tips": myPopupTips,
		},
		data() {
			return {
				statusBarHeight: "",

				userid: "",
				info: {},
				yaoAward: 0,
				val: "",
				size: 160, // 二维码图片大小
				icon: "../manifestImg/logo/logo_40.png",
				iconsize: 20,


				recommendAwardList: [], // 邀请记录
				recommendList: [],


				showTips: false,
				shareList: [
					// #ifdef APP-PLUS
					{
						provider: "weixin",
						type: 0,
						title: "伯贝分享", // 标题
						scene: "WXSceneSession", // 微信好友
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/home/wechatIcon.png",
						wechatText: "微信好友",
					},
					{
						provider: "weixin",
						type: 0,
						title: "伯贝分享", // 标题
						scene: "WXSceneTimeline", // 微信朋友圈
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/home/friendIcon.png",
						wechatText: "朋友圈",
					},
					// #endif

					{
						provider: "",
						type: "",
						title: "",
						scene: "",
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/third/copyLink.png",
						wechatText: "复制链接",
					},
				],

			}
		},
		onLoad(option) {
			this.statusBarHeight = this.$mySysInfo().top;
			this.userid = option.userid;
			this.getInvInfo();
		},
		onShow() {

		},

		methods: {

			getInvInfo() {
				let that = this;
				that.$post({
					module: 'User',
					interface: 9001,
					data: {
						userId: that.userid,
					},
				}).then(res => {
					that.info = res;
					that.val = res.qrUrl;
					that.yaoAward = res.yaoAward;
					that.recommendAwardList = res.recommendAwardList;
					that.recommendList = res.recommendList;

				}).catch((err) => {
					if (err.code == 4800 && err.message == "用户不存在") {
						uni.navigateTo({
							url: "/pages/login/index"
						})
					}
				})
			},
			onInviteBtn() {
				this.showTips = true;
			},
			tipsOpen(param) {
				this.showTips = param;
			},
			tipsClose(param) {
				this.showTips = param;
			},
			onShareItem(param) {
				let that = this;
				let item = param;
				// item.href = "http://www.bobei.shop/h5/#/serviceCenter/invite?userid=" + that.userid; // 正式
				// item.href = "http://www.hthy.top/h5/#/serviceCenter/invite?userid=" + that.userid; // 测试
				item.href = this.val
				item.imageUrl = item.wechatIcon;
				item.summary = "邀请好友";
				if (param.wechatText !== "复制链接") {
					uni.share({
						provider: item.provider,
						scene: item.scene,
						type: item.type,
						href: item.href,
						title: item.title,
						summary: item.summary,
						imageUrl: item.imageUrl,
						success: function(res) {
							// console.log("success:" + JSON.stringify(res));
							that.showTips = false;
						},
						fail: function(err) {
							// console.log("fail:" + JSON.stringify(err));
							that.showTips = false;
						}
					});
				} else {
					// #ifdef H5
					this.$setClipboardData({
						data: item.href,
						success: function() {
							// console.log('copy success');
							that.showTips = false;
						},
						fail: function() {
							// console.log('copy fail');
							that.showTips = false;
						}
					})
					// #endif
					// #ifndef H5
					uni.setClipboardData({
						data: item.href,
						success: function() {
							// console.log('copy success');
							that.showTips = false;
						},
						fail: function() {
							// console.log('copy fail');
							that.showTips = false;
						}
					});
					// #endif
				}

			},
			qrR(url) {
				// console.log("二维码base64:", url)
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			invite_rule() {
				uni.navigateTo({
					url: "/setting/about?title=邀请规则&name=invite_rule"
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-image: url("http://www.bobei.shop/static/third/shareBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-bottom: 100rpx;



		.topHead {
			background: transparent;
			height: 88rpx;
			width: 100%;
			padding: 0 32rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;

			.back {
				width: 36rpx;
				height: 36rpx;
			}

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				position: absolute;
				top: 22rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}

		.page {
			width: 100%;
			position: relative;
			top: 0;
			left: 0;
			z-index: 2;

			.inviteBox {
				padding-left: 30rpx;

				.invite {
					width: 514rpx;
					height: 48rpx;
					background: rgba(185, 76, 46, 0.81);
					border-radius: 28rpx 28rpx 28rpx 28rpx;

					.noticeSwiper {
						width: 100%;
						height: 48rpx;

						.noticeSwiperItem {
							width: 100%;
							height: 48rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							padding: 0 22rpx;


						}
					}
				}

				.rule {
					width: 154rpx;
					height: 48rpx;
					background: rgba(185, 76, 46, 0.81);
					border-radius: 28rpx 0px 0px 28rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: normal;
					color: #FFFFFF;
				}
			}

			.shareTitle {
				width: 622rpx;
				height: 358rpx;
				margin: 30rpx auto 0;
				display: block;
			}

			.mainBox {
				width: 636rpx;
				height: 878rpx;
				margin: 0 auto;
				position: relative;

				.shareMain {
					width: 636rpx;
					height: 878rpx;
				}

				.main {
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					padding-top: 48rpx;
					flex-direction: column;

					.tips {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #DB6639;
					}

					.num {
						align-items: flex-end;

						.numText {

							font-size: 182rpx;
							font-family: PingFang SC-Semibold, PingFang SC;
							font-weight: 600;
							line-height: 213rpx;
							background: linear-gradient(180deg, #E66F4E 0%, #E83019 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						.bean2 {
							width: 47rpx;
							height: 47rpx;
							padding-bottom: 30rpx;
						}
					}

					.tips2 {
						font-size: 34rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 130rpx;
					}

					.inviteBtn {
						font-size: 23rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFF8EB;
						width: 390rpx;
						height: 93rpx;
						background: linear-gradient(180deg, #FBE192 0%, #F6CB4B 20%, #D88437 56%, #E08D39 68%, #F4CB68 100%);
						border-radius: 47rpx 47rpx 47rpx 47rpx;
						border: 3rpx solid #979797;
						margin-top: 20rpx;
					}

					.qrcodeBox {
						width: 180rpx;
						height: 180rpx;
						background: #ffffff;
						border-radius: 8rpx;
						margin-top: 10rpx;
						padding-top: 10rpx;

						.qrCodeImg {
							width: 180rpx;
							height: 180rpx;
						}

					}

					.inviteCode {
						width: 260rpx;
						height: 46rpx;
						background: linear-gradient(180deg, #BD2821 0%, #C92A28 100%);
						border-radius: 27rpx 27rpx 27rpx 27rpx;
						margin-top: 30rpx;

						.inviteCodeL {
							font-size: 23rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}

						.inviteCodeR {
							font-size: 23rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFE18F;
						}
					}
				}
			}

			.record {
				margin: 40rpx auto 0;
				width: 690rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 30rpx 20rpx 36rpx 14rpx;

				.recordTitle {
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF555F;
					background-image: url("http://www.bobei.shop/static/third/inviteRecordTitleBg.png");
					background-size: 288rpx 56rpx;
					background-repeat: no-repeat;
					background-position: 50%;
					margin: 0 auto;
				}

				.recordList {
					margin-top: 14rpx;

					.recordListItem {
						.recordListItemL {
							.recordListItemLIndex {
								width: 73rpx;
								height: 57rpx;
								position: relative;

								.indexIcon {
									width: 73rpx;
									height: 57rpx;
								}

								.indexText {
									font-size: 40rpx;
									font-family: PingFang SC-Semibold, PingFang SC;
									font-weight: 600;

									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
								}

								.indexTextWhite {
									color: #FFFFFF;
								}

								.indexTextBlack {
									color: #000000;
								}
							}

							.info {
								padding-left: 22rpx;

								.mobile {
									font-size: 24rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: normal;
									color: #202236;
								}

								.date {
									font-size: 20rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: normal;
									color: #6E6E6E;
								}
							}
						}

						.recordListItemR {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: normal;
							color: #EC615C;
						}
					}
				}
			}

			.to-the-end {
				width: 100%;
				margin-top: 44rpx;

				.to-the-end-text {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: normal;
					color: #FFE9E6;
					margin: 0 30rpx;
				}

				.to-the-end-line {
					width: 180rpx;
					height: 2rpx;
					background: #ffffff;

				}

			}
		}

		.tipsBox {
			background: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			padding: 40rpx;

			.tipsTitle {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}

			.shareBox {
				margin-top: 30rpx;

				.shareItem {
					flex-direction: column;
					margin-right: 30rpx;

					.wechatIcon {
						width: 120rpx;
						height: 120rpx;
					}

					.wechatText {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-top: 28rpx;
					}
				}
			}

		}
	}
</style>
